<template>
  <div class="exchange-page common-page">
    <van-list
      :finished="finished"
      finished-text="没有更多了"
    >
      <div class="list">
        <exchange-item
          @onExchangeClick='onExchangeClick'
          v-for="(item,index) in list"
          :key="index"
          :exchangeInfo="item"
        ></exchange-item>
      </div>
    </van-list>
    <dialog-custom
      ref="dialog"
      title="兑换成功"
      message="请前往蔚来校园使用"
      confirmButtonText="我知道了"
      confirmButtonColor="#1677FF"
      @confirm="closeCurrPage"
    ></dialog-custom>
    <dialog-custom
      ref="abandonDialog"
      title="是否放弃本次兑换？"
      confirmButtonText="继续兑换"
      confirmButtonColor="#1677FF"
      cancelButtonText="取消"
      :showCancelButton="true"
      @confirm="confirmAbandon"
      @cancel="cancelAbandon"
    ></dialog-custom>
  </div>
</template>

<script>
import { List, Cell, CellGroup } from "vant";
import ExchangeItem from "@/components/ExchangeItem";
import DialogCustom from "@/components/DialogCustom";
import Exchange from "./mixin/exchange";
import Share from "./mixin/share";
export default {
  name: "exchange",
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [ExchangeItem.name]: ExchangeItem,
    [DialogCustom.name]: DialogCustom,
  },
  mixins: [Exchange,Share],
  data() {
    return {
      list: [],
      finished: false,
      couponInfo:{}
    };
  },
  created() {
    if (this.$route.query.exchangeList) {
      let exchangeList = JSON.parse(this.$route.query.exchangeList) || {};
      this.list = exchangeList;
      this.finished = true;
    }
    if (this.$route.query.exchangeInfo) {
      let exchangeInfo = JSON.parse(this.$route.query.exchangeInfo) || {};
      this.exchangeInfo = exchangeInfo;
      this.finished = true;
    }
    this.setShare();
  },
  mounted() {},
  methods: {
    // 点击立即兑换
    onExchangeClick(info) {
      this.couponInfo = info;
      if (!this.token) {
        this.getExchangeCouponToken();
        return;
      }
      this.exchangeCoupon();
    },
    // 取消放弃
    cancelAbandon() {},
    confirmAbandon() {},
    exchangeSuccess() {
      this.$refs.dialog.showDialog();
    },
    exchangeFail() {
      this.$toast.err("当前现金券金额不足，暂时无法兑换");
    },
    enterToMyBindBox() {
      this.$router.replace({
        path: "/myBlindBox",
      });
    },
    closeCurrPage() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  .exchange-item {
    margin-bottom: 24px;
  }
}
</style>
